<template>
  <view class="office-container">
    <!-- 顶部导航 -->
    <view class="office-header">
      <text class="title">办公中心</text>
      <view class="search-box" @tap="goToSearch">
        <text class="search-placeholder">搜索办公内容...</text>
      </view>
    </view>

    <!-- 快捷入口 -->
    <view class="quick-entry">
      <view class="entry-item" @tap="goToPage('todo')">
        <view class="entry-icon todo">
          <text class="count" v-if="todoCount > 0">{{todoCount}}</text>
        </view>
        <text class="entry-label">待办提醒</text>
      </view>
      
      <view class="entry-item" @tap="goToPage('approval')">
        <view class="entry-icon approval">
          <text class="count" v-if="approvalCount > 0">{{approvalCount}}</text>
        </view>
        <text class="entry-label">审批中心</text>
      </view>
      
      <view class="entry-item" @tap="goToPage('notice')">
        <view class="entry-icon notice">
          <text class="count" v-if="noticeCount > 0">{{noticeCount}}</text>
        </view>
        <text class="entry-label">公告通知</text>
      </view>
      
      <view class="entry-item" @tap="goToPage('document')">
        <view class="entry-icon document"></view>
        <text class="entry-label">文档库</text>
      </view>
    </view>

    <!-- 最近待办 -->
    <view class="recent-section">
      <view class="section-header">
        <text class="section-title">最近待办</text>
        <text class="more" @tap="goToPage('todo')">查看更多</text>
      </view>
      <view class="todo-list">
        <view 
          class="todo-item" 
          v-for="item in recentTodos" 
          :key="item.id"
          @tap="goToTodoDetail(item.id)"
        >
          <view class="todo-content">
            <text class="todo-title">{{item.title}}</text>
            <text class="todo-time">{{item.createTime}}</text>
          </view>
          <view class="todo-status" :class="item.status">
            {{getStatusText(item.status)}}
          </view>
        </view>
      </view>
    </view>

    <!-- 最新公告 -->
    <view class="recent-section">
      <view class="section-header">
        <text class="section-title">最新公告</text>
        <text class="more" @tap="goToPage('notice')">查看更多</text>
      </view>
      <view class="notice-list">
        <view 
          class="notice-item" 
          v-for="item in recentNotices" 
          :key="item.id"
          @tap="goToNoticeDetail(item.id)"
        >
          <view class="notice-content">
            <text class="notice-title">{{item.title}}</text>
            <text class="notice-time">{{item.publishTime}}</text>
          </view>
          <view class="notice-badge" v-if="!item.read">新</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      todoCount: 5,
      approvalCount: 3,
      noticeCount: 2,
      recentTodos: [
        {
          id: 1,
          title: '审批张三的请假申请',
          status: 'pending',
          createTime: '2024-01-15 09:00'
        },
        {
          id: 2,
          title: '完成月度工作总结',
          status: 'processing',
          createTime: '2024-01-15 10:30'
        },
        {
          id: 3,
          title: '参加部门例会',
          status: 'completed',
          createTime: '2024-01-15 14:00'
        }
      ],
      recentNotices: [
        {
          id: 1,
          title: '关于2024年春节放假安排的通知',
          publishTime: '2024-01-15 08:00',
          read: false
        },
        {
          id: 2,
          title: '公司年会活动安排',
          publishTime: '2024-01-14 16:00',
          read: true
        }
      ]
    }
  },
  
  methods: {
    goToPage(type) {
      const pages = {
        todo: '/pages/office/todo/list',
        approval: '/pages/office/approval/list',
        notice: '/pages/office/notice/list',
        document: '/pages/office/document/list'
      }
      uni.navigateTo({ url: pages[type] })
    },
    
    goToTodoDetail(id) {
      uni.navigateTo({ url: `/pages/office/todo/detail?id=${id}` })
    },
    
    goToNoticeDetail(id) {
      uni.navigateTo({ url: `/pages/office/notice/detail?id=${id}` })
    },
    
    goToSearch() {
      uni.navigateTo({ url: '/pages/office/search' })
    },
    
    getStatusText(status) {
      const statusMap = {
        pending: '待处理',
        processing: '进行中',
        completed: '已完成'
      }
      return statusMap[status] || status
    }
  }
}
</script>

<style lang="scss" scoped>
.office-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
}

.office-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
  }
  
  .search-box {
    flex: 1;
    margin-left: 40rpx;
    background: #fff;
    border-radius: 30rpx;
    padding: 20rpx 30rpx;
    
    .search-placeholder {
      font-size: 28rpx;
      color: #999;
    }
  }
}

.quick-entry {
  display: flex;
  justify-content: space-around;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 20rpx;
  margin-bottom: 40rpx;
  
  .entry-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .entry-icon {
      width: 120rpx;
      height: 120rpx;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      position: relative;
      
      &.todo {
        background: linear-gradient(135deg, #52c41a, #73d13d);
      }
      
      &.approval {
        background: linear-gradient(135deg, #1890ff, #40a9ff);
      }
      
      &.notice {
        background: linear-gradient(135deg, #faad14, #ffc53d);
      }
      
      &.document {
        background: linear-gradient(135deg, #722ed1, #b37feb);
      }
      
      .count {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        background: #ff4d4f;
        color: #fff;
        border-radius: 50%;
        width: 40rpx;
        height: 40rpx;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .entry-label {
      font-size: 28rpx;
      color: #333;
    }
  }
}

.recent-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .more {
      font-size: 28rpx;
      color: #1890ff;
    }
  }
  
  .todo-list,
  .notice-list {
    .todo-item,
    .notice-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .todo-content,
      .notice-content {
        flex: 1;
        
        .todo-title,
        .notice-title {
          font-size: 30rpx;
          color: #333;
          margin-bottom: 10rpx;
          display: block;
        }
        
        .todo-time,
        .notice-time {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .todo-status {
        font-size: 24rpx;
        padding: 10rpx 20rpx;
        border-radius: 20rpx;
        
        &.pending {
          background: #fff2e8;
          color: #fa541c;
        }
        
        &.processing {
          background: #e6f7ff;
          color: #1890ff;
        }
        
        &.completed {
          background: #f6ffed;
          color: #52c41a;
        }
      }
      
      .notice-badge {
        background: #ff4d4f;
        color: #fff;
        font-size: 20rpx;
        padding: 5rpx 10rpx;
        border-radius: 10rpx;
      }
    }
  }
}
</style>